import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import VM from 'scratch-vm';

import Box from '../box/box.jsx';
import Button from '../button/button.jsx';
import Controls from '../../containers/controls.jsx';
import { getStageDimensions } from '../../lib/screen-utils';
import { STAGE_SIZE_MODES } from '../../lib/layout-constants';

import fullScreenIcon from './icon--fullscreen.svg';
import largeStageIcon from './icon--large-stage.svg';
import smallStageIcon from './icon--small-stage.svg';
import unFullScreenIcon from './icon--unfullscreen.svg';
import styles from './stage-header.css';

const StageHeaderComponent = function (props) {
	const {
		isFullScreen,
		//isPlayerOnly,
		onKeyPress,
		onSetStageLarge,
		onSetStageSmall,
		onSetStageFull,
		onSetStageUnFull,
		showBranding,
		stageSizeMode,
		vm,
	} = props;

	let header = null;

	if (isFullScreen) {
		const stageDimensions = getStageDimensions(null, true);
		const stageButton = showBranding ? (
			<div className={styles.embedScratchLogo}>
				<a href='/' target='_blank' rel='noopener noreferrer'>
					<img alt='奥利给' src={_scratch_logo} />
				</a>
			</div>
		) : (
			<Button
				className={styles.stageButton}
				onClick={onSetStageUnFull}
				onKeyPress={onKeyPress}
			>
				<img
					alt='退出全屏模式'
					className={styles.stageButtonIcon}
					draggable={false}
					src={unFullScreenIcon}
					title='全屏模式'
				/>
			</Button>
		);
		header = (
			<Box className={styles.stageHeaderWrapperOverlay}>
				<Box
					className={styles.stageMenuWrapper}
					style={{ width: stageDimensions.width }}
				>
					<Controls vm={vm} />
					{stageButton}
				</Box>
			</Box>
		);
	} else {
		const stageControls = (
			//isPlayerOnly ? ([]) :
			<div className={styles.stageSizeToggleGroup}>
				<div>
					<Button
						className={classNames(
							styles.stageButton,
							styles.stageButtonFirst,
							stageSizeMode === STAGE_SIZE_MODES.small
								? null
								: styles.stageButtonToggledOff
						)}
						onClick={onSetStageSmall}
					>
						<img
							alt='缩小舞台'
							className={styles.stageButtonIcon}
							draggable={false}
							src={smallStageIcon}
						/>
					</Button>
				</div>
				<div>
					<Button
						className={classNames(
							styles.stageButton,
							styles.stageButtonLast,
							stageSizeMode === STAGE_SIZE_MODES.large
								? null
								: styles.stageButtonToggledOff
						)}
						onClick={onSetStageLarge}
					>
						<img
							alt='放大舞台'
							className={styles.stageButtonIcon}
							draggable={false}
							src={largeStageIcon}
						/>
					</Button>
				</div>
			</div>
		);
		header = (
			<Box className={styles.stageHeaderWrapper}>
				<Box className={styles.stageMenuWrapper}>
					<Controls vm={vm} />
					<div className={styles.stageSizeRow}>
						{stageControls}
						<div>
							<Button className={styles.stageButton} onClick={onSetStageFull}>
								<img
									alt='进入全屏模式'
									className={styles.stageButtonIcon}
									draggable={false}
									src={fullScreenIcon}
									title='全屏模式'
								/>
							</Button>
						</div>
					</div>
				</Box>
			</Box>
		);
	}

	return header;
};

const mapStateToProps = (state) => ({
	// This is the button's mode, as opposed to the actual current state
	stageSizeMode: state.scratchGui.stageSize.stageSize,
});

StageHeaderComponent.propTypes = {
	isFullScreen: PropTypes.bool.isRequired,
	//isPlayerOnly: PropTypes.bool.isRequired,
	onKeyPress: PropTypes.func.isRequired,
	onSetStageFull: PropTypes.func.isRequired,
	onSetStageLarge: PropTypes.func.isRequired,
	onSetStageSmall: PropTypes.func.isRequired,
	onSetStageUnFull: PropTypes.func.isRequired,
	showBranding: PropTypes.bool.isRequired,
	stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
	vm: PropTypes.instanceOf(VM).isRequired,
};

StageHeaderComponent.defaultProps = {
	stageSizeMode: STAGE_SIZE_MODES.large,
};

export default connect(mapStateToProps)(StageHeaderComponent);
// export default injectIntl(connect(
//     mapStateToProps
// )(StageHeaderComponent));
